<template>
  <div class="staLiveDataWrap">
    <div>
      <van-nav-bar
        left-text="返回"
        :title="textZh == '灾害统计' ? '灾害统计' : '预警信息'"
        left-arrow
        @click-left="onClickLeft"
      >
      </van-nav-bar>
      <div>
        <div class="top">
          <div class="listLeft">
            <img
              :src="
                require(`@/assets/Earlywarningmap/yujingmap/${nowClickItem.imageType}-${nowClickItem.degree}.png`)
              "
              alt=""
            />
          </div>
          <div class="listRight">
            <div>
              {{ nowClickItem.alarmHeadline }}
            </div>
            <div
              style="font-size: 12px;
        
        font-weight: 400;
        color: #656b75;margin-top: 3px;"
            >
              {{ nowClickItem.alarmEffective }}
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottomh1">
            <img src="../../assets/Earlywarningmap/yujing.png" alt="" />
            预警描述
          </div>
          <div class="bottomtext">
            {{ nowClickItem.alarmDescription }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    nowClickItem: {
      type: Object,
      default: () => {},
    },
    dw: {
      type: String,
      default: () => {},
    },
    yjlist: {
      type: String,
      default: () => {},
    },
    textZh: {
      type: String,
      default: () => {},
    },
    history: {
      type: String,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    onClickLeft() {
      if ((this.textZh = '灾害统计')) {
        this.$emit('Disasterstatistics')
      }
      if (this.history == '预警历史') {
        this.$emit('Disasterstatistics')
      }
      if (this.yjlist == '预警列表') {
        this.$emit('detailBack')
      } else if (this.yjlist == '预警统计') {
        this.$emit('detailBack1')
      } else {
        this.$emit('detailBack1')
      }
    },
    // onClickRight() {
    //   if (this.tabActive == 1) {
    //     this.$toast('此菜单下，请点击地图！')
    //     return
    //   }
    //   this.showComCity = true
    // },
  },
}
</script>
<style type="text/css" lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/deep/ .van-nav-bar__content {
}
.staLiveDataWrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f9fafd;
  .top {
    position: absolute;
    top: 14%;
    left: 50%;
    display: flex;
    padding: 10px;
    align-items: center;
    transform: translate(-50%, -50%);
    width: 345px;
    height: 69px;
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
    border-radius: 10px;
    .listLeft {
      margin-right: 5px;
      img {
        width: 40px;
        height: 100%;
      }
    }
    .listRight {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #101010;
    }
  }
  .bottom {
    position: absolute;
    top: 56%;
    left: 50%;
    padding: 10px;
    transform: translate(-50%, -50%);
    width: 345px;
    height: 70%;
    background: linear-gradient(180deg, #d5e3ff 0%, #f5f8fe 8%, #ffffff 100%);
    box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.3);
    border-radius: 10px;
    .bottomh1 {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #101010;
      vertical-align: middle;
      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
    .bottomtext {
      width: 100%;
      margin-top: 10px;
      font-size: 14px;
      line-height: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #656b75;
      height: 90%;
      overflow-y: auto;
    }
  }
}
</style>
